<template>
  <transition name="slide-fade">
    <div v-if="isShow" class="layer" ref="layer">
      <el-card>
        <el-checkbox-group v-model="oneCheck" @change="oneChange">
          <p v-for="(value, key) in checkData" :key="value.id">
            <el-checkbox :label="value.id">{{ value.label }}</el-checkbox>
          </p>
        </el-checkbox-group>
      </el-card>
      <transition name="slide-fade">
        <el-card class="card-second" ref="second" v-if="oneCheck.length > 0">
          <el-scrollbar>
            <el-checkbox-group v-model="twoCheck" @change="twoChange">
              <el-row v-for="(value, key) in twoData" :key="value.id">
                <el-col :span="12" v-for="(valueChild, keyChild) in value.children"
                  :key="valueChild.dictCode || valueChild.code">
                  <el-checkbox :label="value.id + '-' + (valueChild.dictCode || valueChild.code)">
                    <span v-if="value.id === 'type3'"> {{ `${valueChild.label}（70s前）` }}</span>
                    <span v-else> {{ valueChild.label }}</span>
                  </el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-scrollbar>
        </el-card>
      </transition>
    </div>
  </transition>
</template>
<script setup>
import { checkData } from '@/views/quickMapping/common/layer/layer'
import { getGeom } from '@/api/quickMapping/quickMapping/index'

const props = defineProps({
  isShow: Boolean
})
const { proxy } = getCurrentInstance()
const emit = defineEmits(['getFormLists']);

const oneCheck = ref([])
const twoCheck = ref([])
const twoData = ref([])
const list = ref([])
const oneChange = val => {
  twoData.value = val.map(item => {
    return checkData[item]
  })
  // twoCheck.value = val.map(item => {
  //   return checkData[item].children.map(itemChild => {
  //     return item + '-' + (itemChild.dictCode || itemChild.code)
  //   })
  // }).flat()
  nextTick(() => {
    if (proxy.$refs.second.$el.clientHeight >= proxy.$refs.layer.clientHeight * 2) {
      proxy.$refs.second.$el.style.height = '200%'
    }
  })
  // twoChange(twoCheck.value)
}
const twoChange = val => {
  let formLists = []
  val.map(item => {
    let key = item.split('-')[0]
    let code = item.split('-')[1]
    let itemArr = checkData[key].children.filter(itemChild => {
      if (itemChild.dictCode) return itemChild.dictCode == code
      if (itemChild.code) return itemChild.code == code
    })
    formLists.push(...itemArr)
  })
  /*getGeom(formLists).then(res => {
    list.value = res.data
  })*/
  //传递勾选图层列表
  emit('getFormLists', formLists)
}

watch(() => props.isShow, () => {
  if(!props.isShow) {
    oneCheck.value = []
    twoCheck.value = []
  }
})

defineExpose({
  list
})
</script>
<style lang="scss" scoped>
.layer {
  position: absolute;
  top: 0;
  right: 70px;

  .card-second {
    position: absolute;
    top: 0;
    right: 168px;
    width: 350px;

    :deep(.el-card__body) {
      height: 100%;
      padding-right: 0 !important;
    }
  }
}
</style>